<template>
	<view class="font">
		
	<view :class="{'show-box':showState}" @click="hiddenShow">
		
	</view>
	<view class="content" :class="showState?'show':'hide'">
		<view class="mainTop">
			<view class="mianTaber" v-for="(item,index) in taberList" :key="item.idso" @click="getTar(index)"
				:class="{'borderBottom':contin==index}">{{item.text}}</view>
		</view>
		<view class="mainCenter" v-if="contin==0">
			<view class="mainCenBox">
				<input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phoneNumber">
				<view class="mainInp" v-if="codeif==false">
					<input :type="passworif" placeholder="请输入密码" maxlength="28" v-model="password">
					<view class="poerter" style="padding-right: 20rpx;" @click="getshouBox"><text
							v-if="shouBox==false">显示</text><text v-else>隐藏</text></view>
				</view>
				<!-- <view class="mainInp" v-else>
					<input type="number" placeholder="请输入验证码" maxlength="15" v-model="codeNumber">
					<view class="poerterii" style="padding-right: 20rpx;">
						<text v-if="shoins==61">获取验证码</text>
						<text v-else>{{shoins}}重新发送</text>
					</view>
				</view> -->
			</view>
			<view class="mainBtnBox">
				<view class="mainBtn" v-for="(item,index) in btnList" :key="index" @click="getBtnTar(item,index)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="mainCenter" v-if="contin==1">
			<view class="mainCenBox">
				<input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phoneNumber">
				<!-- <view class="mainInp">
					<input type="number" placeholder="请输入验证码" maxlength="15" v-model="codeNumber">
					<view class="poerterii" style="padding-right: 20rpx;">
						<text v-if="shoins==61">获取验证码</text>
						<text v-else>{{shoins}}重新发送</text>
					</view>
				</view> -->
				<view class="mainInp">
					<input :type="passworif" placeholder="请输入密码" maxlength="28" v-model="password">
					<view class="poerter" style="padding-right: 20rpx;" @click="getshouBox">
						<text v-if="shouBox==false">显示</text><text v-else>隐藏</text></view>
				</view>
			</view>
			<view class="mainBtnBox zuche">
				<view class="mainBtn" @click="getresist">立即注册</view>
			</view>
		</view>
		<view class="iconifbt" v-if="contin==0">
			<view class="log_luit">
				<checkbox-group @change="checkboxChange">
					<checkbox color="#999" :checked="checkedif"/>
					勾选即表示同意<text @click="tourl('/pages/xieyi/xieyi?type=2')">《用户协议》</text>及<text
						@click="tourl('/pages/xieyi/xieyi?type=1')">《隐私政策》</text>
				</checkbox-group>
			</view>
		</view>
	</view>
	</view>
</template>
 
<script>
	import { mobile } from "../../uni_modules/uv-ui-tools/libs/function/test";
	export default {
		data() {
			return {
				showState:false,
				taberList: [{
						text: '登录',
						idso: 1
					},
					{
						text: '注册',
						idso: 2
					}
				],
				contin: 0,
				// btnList: ['密码登录', '验证码登录'],
				btnList: ['密码登录'],
				// btnListyi: ['密码登录', '验证码登录'],
				// btnListya: ['验证码登录', '密码登录'],
				checkedif: false,
				shouBox: false,
				shoins: 60,
				passworif: 'password',
				codeif: false,
				phoneNumber: '',
				password: '',
				codeNumber: ''
			}
		},
		onLoad(per) {
			console.log(per, 222222222);
		},
		methods: {
			showBox(){
				this.showState = true
			},
			hiddenShow(){
				this.showState = false
			},
			// 是否勾选
			checkboxChange(e) {
				this.checkedif=!this.checkedif
			},
			// 选择登录或注册页面
			getTar(e) {
				this.contin = e
			},
			// 注册按钮
			getresist() {
				if (!mobile(this.phoneNumber)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的11位手机号'
					})
					this.phoneNumber = '';
					return false;
				}
				if(this.password.length < 6 ){
					uni.showToast({
						title:"请输入不小于6位数的密码",
						icon:"none"
					})
					return;
				}
				let data = {
					phone: this.phoneNumber,
					password: this.password,
				}
				this.$request('/LoginPage/phoneEnroll','POST',data)
				.then((res)=>{
					if(res.data.code == 200){
						uni.showToast({
							title:res.data.msg,
							icon:"success"
						})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:"none",
						})
					}
				}).catch((err)=>{
					uni.showToast({
						title:"请求出错了",
						icon:"none"
					})
				})
			},
			// 密码登录
			getBtnTar(e, i) {
				if (!mobile(this.phoneNumber)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的11位手机号'
					})
					this.phoneNumber = '';
					return false;
				}
				if(this.password.length < 6 ){
					uni.showToast({
						title:"请输入不小于6位数的密码",
						icon:"none"
					})
					return;
				}
				if(!this.checkedif){
					uni.showToast({
						title:"请勾选后登录",
						icon:"none"
					})
					return;
				}
					let data = {
						phone: this.phoneNumber,
						password: this.password,
					}
					this.$request('/LoginPage/phoneLogin','POST',data)
					.then(res=>{
						if(res.data.data.code == 200){
							uni.showToast({
								title:res.data.data.msg,
								icon:"success",
								success: (data) => {
									uni.setStorageSync('token',res.data.data.token)
									uni.setStorageSync('phone',this.phoneNumber)
									if(this.$parent.why){
										setTimeout(()=>{
											uni.reLaunch({ //信息更新成功后跳转到小程序首页
												url: '/components/common/share/share?formid='+this.$parent.formid
											});
										},1000)
										return;
									}
									setTimeout(()=>{
										uni.reLaunch({ //信息更新成功后跳转到小程序首页
											url: '/pages/index/index'
										});
									},1000)
								}
								
							})
						}
					}).catch(err=>{
						uni.showToast({
							title:"账号密码错误",
							icon:"error"
						})
					})
					// this.$emit('passwordLogin', data)
				// } else if (e == '验证码登录' & i == 0) {
				// 	let data = {
				// 		mobilPhone: this.phoneNumber,
				// 		codeNumber: this.codeNumber,
				// 		checked: this.checkedif
				// 	}
				// 	this.$emit('capChaLogin', data)
				// 	console.log('验证码登录');
				// }
			},
			// 隐私政策内容页面
			tourl(e) {
				uni.navigateTo({
					url: e
				})
			},
			getshouBox() {
				this.shouBox = !this.shouBox
				if (this.shouBox == false) {
					this.passworif = "password"
				} else {
					this.passworif = "text"
				}
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.show-box{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
		// background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: -1;
	}
	.show{
		transition: all 0.3s ease;
		transform: translateY(0%) !important;
	}
	.hide{
		transition: all 0.3s ease;
		transform: translateY(100%);
	}
	.content {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		// height: 55%;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
 
		.mainTop {
			display: flex;
			align-items: center;
			justify-content: space-around;
 
			.mianTaber {
				padding: 20rpx;
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #444;
				font-weight: bold;
				font-size: 34rpx;
				padding-bottom: 10rpx;
			}
 
			.borderBottom {
				color: #80b156;
				transition: all 1s linear;
 
				&:before {
					content: '';
					width: 20rpx;
					height: 20rpx;
					margin-right: 15rpx;
					border-bottom: 6rpx solid #80b156;
					border-right: 6rpx solid #80b156;
					transform: rotate(-45deg);
				}
 
				&:after {
					content: '';
					width: 20rpx;
					height: 20rpx;
					margin-left: 15rpx;
					border-bottom: 6rpx solid #80b156;
					border-left: 6rpx solid #80b156;
					transform: rotate(45deg);
				}
			}
		}
 
		.mainCenter {
			padding-top: 20rpx;
 
			.mainCenBox {
				input {
					width: 75%;
					margin: auto;
					border: solid 1rpx #999;
					margin-top: 40rpx;
					padding: 20rpx 30rpx;
					border-radius: 20rpx;
				}
 
				.mainInp {
					position: relative;
 
					.poerterii {
						position: absolute;
						top: 50%;
						right: -20rpx;
						transform: translate(-50%, -50%);
						color: #80b156;
					}
 
					.poerter {
						position: absolute;
						top: 50%;
						right: 30rpx;
						transform: translate(-50%, -50%);
						z-index:10;
 
						text {
							color: #999;
						}
 
						.mr {
							padding-right: 30rpx !important;
						}
					}
				}
			}
 
			.zuche {
				.mainBtn {
					color: #fff !important;
					background-color: #80b156 !important;
					margin-bottom: 100rpx !important;
				}
			}
 
			.mainBtnBox {
				padding-top: 60rpx;
 
				.mainBtn {
					margin: auto;
					width: 75%;
					text-align: center;
					padding: 30rpx;
					border-radius: 30rpx;
					margin-bottom: 20rpx;
					border: #80b156 solid 3rpx;
					background-color: #80b156;
					font-size: 34rpx;
					color: #fff;
 
					// &:nth-last-child(1) {
					// 	color: #333;
					// 	background-color: transparent;
					// }
				}
			}
		}
 
		.iconifbt {
			padding: 55rpx 0 30rpx;
 
			.log_luit {
				font-size: 30rpx;
 
				text {
					color: #80b156;
				}
			}
		}
	}
</style>